<!DOCTYPE html>
<html>
    <head>
        <title>PlayCanvas Virtual Reality</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="icon" type="image/png" href="../playcanvas-favicon.png" />
        <script src="../../build/output/playcanvas.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
                overflow: hidden;
            }
            canvas {
                width:100%;
                height:100%;

            }
            .message {
                position: absolute;
                padding: 8px 16px;
                left: 20px;
                bottom: 0px;
                color: #ccc;
                background-color: rgba(0, 0, 0, .5);
                font-family: "Proxima Nova", Arial, sans-serif;
            }
        </style>
    </head>

    <body>
        <canvas id="application-canvas"></canvas>
        <div>
            <p class="message"></p>
        </div>
        <script>
            // draw some axes
            var drawAxes = function (pos, scale) {
                var color = new pc.Color(1,0,0);

                var axis = new pc.Vec3();
                var end = new pc.Vec3().copy(pos).add(axis.set(scale,0,0));

                app.renderLine(pos, end, color);

                color.set(0, 1, 0);
                end.sub(axis.set(scale,0,0)).add(axis.set(0,scale,0));
                app.renderLine(pos, end, color);

                color.set(0, 0, 1);
                end.sub(axis.set(0,scale,0)).add(axis.set(0,0,scale));
                app.renderLine(pos, end, color);
            }
        </script>


        <script>
            var message = function (msg) {
                var el = document.querySelector('.message');
                el.textContent = msg;
            }

            var canvas = document.getElementById('application-canvas');
            var app = new pc.Application(canvas, {
                mouse: new pc.Mouse(canvas),
                touch: new pc.TouchDevice(canvas),
                keyboard: new pc.Keyboard(window)
            });
            app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
            app.setCanvasResolution(pc.RESOLUTION_AUTO);

            window.addEventListener("resize", function () {
                app.resizeCanvas(canvas.width, canvas.height);
            });

            // use device pixel ratio
            app.graphicsDevice.maxPixelRatio = window.devicePixelRatio;

            app.start();

            // create camera
            var c = new pc.Entity();
            c.addComponent('camera', {
                clearColor: new pc.Color(44/255, 62/255, 80/255),
                farClip: 10000
            });
            app.root.addChild(c);

            var l = new pc.Entity();
            l.addComponent("light", {
                type: "spot",
                range: 30
            });
            l.translate(0,10,0);
            app.root.addChild(l);


            var createCube = function(x,y,z) {
                var cube = new pc.Entity();
                cube.addComponent("model", {
                    type: "box",
                });
                cube.setLocalScale(1,1,1);
                cube.translate(x, y, z);
                app.root.addChild(cube);
            };

            // create a grid of cubes
            var SIZE = 16;
            for (var x = 0; x < SIZE; x++) {
                for (var y = 0; y < SIZE; y++) {
                    createCube(2*x - SIZE, -1.5, 2*y - SIZE);
                }
            }

            if (app.xr.supported) {
                var activate = function () {
                    if (app.xr.isAvailable(pc.XRTYPE_VR)) {
                        c.camera.startXr(pc.XRTYPE_VR, function (err) {
                            if (err) message("WebXR Immersive VR failed to start: " + err.message);
                        });
                    } else {
                        message("WebXR Immersive VR is not available");
                    }
                };

                app.mouse.on("mousedown", function () {
                    if (! app.xr.active)
                        activate();
                });

                if (app.touch) {
                    app.touch.on("touchend", function () {
                        if (! app.xr.active) {
                            // if not in VR, activate
                            activate();
                        } else {
                            // otherwise reset camera
                            c.camera.endXr();
                        }
                    });
                }

                // end session by keyboard ESC
                app.keyboard.on('keydown', function (evt) {
                    if (evt.key === pc.KEY_ESCAPE && app.xr.active) {
                        app.xr.end();
                    }
                });

                app.xr.on('start', function () {
                    message("WebXR Immersive VR session has started");
                });
                app.xr.on('end', function () {
                    message("WebXR Immersive VR session has ended");
                });
                app.xr.on('available:' + pc.XRTYPE_VR, function (available) {
                    message("WebXR Immersive VR is now " + (available ? 'available' : 'unavailable'));
                });

                if (! app.xr.isAvailable(pc.XRTYPE_VR)) {
                    message("WebXR Immersive VR is not available");
                }
            } else {
                message("WebXR is not supported");
            }
        </script>
    </body>
</html>
